<template>
  <div id="app">
    <div class="bac" style="background-color: #f7f7f7;width: 100%;height: 710px;padding-top: 200px">
      <div class="panel" style="box-shadow:1px 1px 40px 10px gray;border-radius: 10px;border: 1px solid rgba(207,214,227,0.94);background-color: white;width: 500px;height: 300px;margin-left: 550px;">
        <div class="title_content" style="width: 300px;height: 66px;margin: auto;padding-top: 20px">
          <span style="margin-left: 80px;font-size: 30px;font-family: 'Hiragino Sans GB'">后台登录</span>
        </div>
        <div class="ipt_u">
          <el-form style="margin-left: 20px" :model="User" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账 号：" prop="username">
              <el-input style="width: 300px" v-model="User.username"></el-input>
            </el-form-item>
            <el-form-item label="密 码：" prop="password">
              <el-input style="width: 300px" type="password" v-model="User.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 120px" type="primary" @click="Login('ruleForm')">登录</el-button>
              <el-button style="width: 120px;margin-left: 50px" @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Login",
    data(){
      return{
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 3, max: 10, message: '长度在 3 到 18个字符', trigger: 'blur'}
          ],
        },
        User:{},
      }
    },
    methods:{
      Login(formName){
        this.$refs[formName].validate(async  (valid) => {
          if (valid) {
            if(!this.User.username){alert('请输入账号');return false}
            if(!this.User.password){alert('请输入密码');return false}
            let _this = this
            this.$axios.post("http://localhost:8050/user/login",this.User).then(function (res) {
              //清空本次保存数据
              if(res.data!=-1){
                localStorage.setItem("admin",_this.User.username)
                alert("登录成功！")
                _this.User = {};
                _this.LoginFormVisible =false
                _this.$router.push({name:'Admin'})
              }else {
                alert("账号或密码错误！");
                _this.User = {};
              }
            }).catch(function (err) {
              localStorage.removeItem('admin')
              alert("登陆失败！");
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
</style>
